<script setup lang="ts">
import { reactive, ref } from 'vue'
import zmd1 from '../assets/images/zmd1.jpg'
import zmd2 from '../assets/images/zmd2.jpg'
import slogen from '../assets/images/slogen.png'
const banners = reactive([
  {
    path: zmd1
  },
  {
    path: zmd2
  },
  {
    path: zmd1
  },
  {
    path: zmd2
  }
])
const description = ref(
  '本园位于XX市新的经济、商业、教育新区，幼儿园占地面积约3600平方，建筑面积约3600平方，园区面积宽阔，建筑布局合理，环境布置优雅大方，富有童趣。\r\n\r\n有配套的幼儿活动室、午休室、卫生间、图书室、舞蹈室、科学室、美劳室、厨艺室；户外有组合式大型玩具、人工草皮跑道、游戏沙池、植物种植区等设施，一切均按照国际化及省一级幼儿园标准设置。'
)
</script>

<template>
  <div class="home">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item class="w-[1920px] h-[100%]" v-for="item in banners" :key="item.path">
        <img class="absolute top-[100px] left-[200px]" :src="slogen" />
        <img class="w-[1920px]" :src="item.path" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="flex flex-col items-center justify-center mt-1">
    <div class="text-[26px] font-bold text-[#076CE2]">关于我们</div>
    <div class="text-[12px] text-[#B2B2B2]">A Leader School with Qualities of Excellence</div>
  </div>
  <div class="h-[500px] relative mt-[30px]">
    <img src="../assets/images/biankuang.png" class="absolute top-1 left-11 w-[460px]" />
    <div
      class="absolute text-[13px] w-[300px] text-[#8C8C8C] top-[120px] left-[590px] whitespace-pre-line"
    >
      {{ description }}
    </div>
    <div
      style="transform: rotate(10deg)"
      class="w-[350px] h-[240px] absolute top-[100px] left-[920px] pt-[10px] px-[10px] pb-0 shadow-lg border border-gray-200"
    >
      <img src="http://www.frobrel.com/images/e2.jpg" class="" />
    </div>
    <div
      style="transform: rotate(-10deg)"
      class="bg-white w-[200px] h-[140px] absolute top-[0px] left-[1100px] pt-[10px] px-[10px] pb-0 shadow-lg border border-gray-200"
    >
      <img src="http://www.frobrel.com/images/e9.jpg" class="" />
    </div>
  </div>
  <div class="w-[100vw] pb-[80px] background-image">
    <div class="flex flex-col items-center justify-center">
      <div class="text-[26px] mt-1 font-bold text-[#076CE2]">教学特色</div>
      <div class="text-[12px] text-[#B2B2B2]">Teaching characteristics</div>
      <div class="flex mt-1 gap-1">
        <div
          class="flex flex-col items-center px-[10px] py-[15px] shadow-lg border border-gray-200 bg-white"
        >
          <img
            src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg-KC-7QUo5Ne60wYwtQI41QE.jpg.webp"
          />
          <div class="text-center text-[15px] font-bold leading-[35px]">美术课程</div>
          <div class="whitespace-pre-wrap w-4 h-[60px] text-[#999999] text-[12px]">
            关于儿童美术教育的核心理念，朱敬一- 知名艺术家，艺术普及专家提出了感知力这个观点。
          </div>
          <el-button type="primary" size="large" round class="bg-[#409eff] mt-[10px]"
            >了解更多</el-button
          >
        </div>
        <div
          class="flex flex-col items-center px-[10px] py-[15px] shadow-lg border border-gray-200 bg-white"
        >
          <img
            src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAgwaS-7QUo0rjakAMwtQI41QE.jpg.webp"
          />
          <div class="text-center text-[15px] font-bold leading-[35px]">运动课程</div>
          <div class="whitespace-pre-wrap w-4 h-[60px] text-[#999999] text-[12px]">
            主动性的多发展一些体育活动，这样可以培养增进鼻息的感情更融洽。
          </div>
          <el-button type="primary" size="large" round class="bg-[#409eff] mt-[10px]"
            >了解更多</el-button
          >
        </div>
        <div
          class="flex flex-col items-center px-[10px] py-[15px] shadow-lg border border-gray-200 bg-white"
        >
          <img
            src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg3KS-7QUohK3c1gMwtQI41QE.jpg.webp"
          />
          <div class="text-center text-[15px] font-bold leading-[35px]">益智课程</div>
          <div class="whitespace-pre-wrap w-4 h-[60px] text-[#999999] text-[12px]">
            儿童体验到各种新鲜的感受,学习到各种知识,构建起自我身心发展的“里程碑”。
          </div>
          <el-button type="primary" size="large" round class="bg-[#409eff] mt-[10px]"
            >了解更多</el-button
          >
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col items-center justify-center my-1">
    <div class="text-[26px] font-bold text-[#076CE2]">学生生活</div>
    <div class="text-[12px] text-[#B2B2B2]">Student Life</div>
  </div>
  <div class="mx-auto w-[700px] grid grid-cols-3 gap-[10px]">
    <img
      class=""
      src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg8aa-7QUooMa8GDD8AjiyBA.jpg.webp"
    />
    <div class="flex gap-[12px] flex-col items-center justify-center">
      <img
        src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg8Ka-7QUo8__63wEw-QI47wE.jpg.webp"
      />
      <img
        src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg8Ka-7QUoiPmf8wMw-QI4pgI.jpg.webp"
      />
    </div>
    <div class="flex gap-[12px] flex-col items-center justify-center">
      <img
        src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg8Ka-7QUohNKqxgcw-QI4pgI.jpg.webp"
      />
      <img
        src="https://20668790.s61i.faiusr.com/2/AD0I9sLtCRACGAAg8Ka-7QUoyLG-vQUw-QI47wE.jpg.webp"
      />
    </div>
  </div>
  <div class="flex justify-center gap-1 pb-[10px] mt-1 pt-[10px] bg-slate-100">
    <div class="flex flex-col gap-[5px]">
      <div class="border-solid border-b-black border-b-[1px] pb-[5px]">联系方式</div>
      <div class="flex justify-start items-center">
        <el-icon>
          <Location />
        </el-icon>
        <div>联系地址：河南省许昌市鹿鸣湖壹号三期</div>
      </div>
      <div class="flex justify-start items-center">
        <el-icon>
          <PhoneFilled />
        </el-icon>
        <div>联系电话：15887022xx</div>
      </div>
      <div class="flex justify-start items-center">
        <el-icon>
          <Message />
        </el-icon>
        <div>电子邮箱：lmhyh@163.com</div>
      </div>
    </div>
    <div class="">
      <div class="border-solid border-b-black border-b-[1px] pb-[5px]">关注我们</div>
      <div class="flex gap-[10px] text-center">
        <div class="pt-[10px]">
          <img src="../assets/images/ozf8D5QS4HAXx_FKNfpsSifYntzo.jpg" class="w-[150px]" />
          官方微博
        </div>
        <div class="pt-[10px] text-center">
          <img src="../assets/images/ozf8D5QS4HAXx_FKNfpsSifYntzo.jpg" class="w-[150px]" />
          官方抖音
        </div>
        <div class="pt-[10px] text-center">
          <img src="../assets/images/ozf8D5QS4HAXx_FKNfpsSifYntzo.jpg" class="w-[150px]" />
          官方小程序
        </div>
      </div>
    </div>
  </div>
  <div class="h-[50px] text-white leading-[50px] bg-[rgb(0,0,0,0.7)] text-center">
    2024 鹿鸣湖幼儿园版权所有
  </div>
</template>
<style lang="scss">
.background-image {
  background-position: center;
  background-image: url('../assets/images/AD0I9sLtCRACGAAg95_-7QUog9To8AEwgA84xgY.jpg');
  /* 设置背景图片路径 */
  background-size: cover;
  /* 控制背景图片的大小 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
}

.home {
  .el-carousel__container {
    height: 530px;
  }

  .el-carousel__arrow--left {
    background-color: rgb(167, 193, 208, 0.5);
  }

  .el-carousel__arrow--right {
    background-color: rgb(167, 193, 208, 0.5);
  }
}
</style>
